<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="format-detection" content="telephone=no"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="black"><link rel="icon" href="/images/icons/favicon-16x16.png?v=2.6.2" type="image/png" sizes="16x16"><link rel="icon" href="/images/icons/favicon-32x32.png?v=2.6.2" type="image/png" sizes="32x32"><meta name="description" content="在做项目的过程中遇到需要选择城市的表单，需要使得 省市区 三级联动选择。element-ui 中有相关组件，但该组件将三者统一在同一个 select 下拉选择框，使得数据双向绑定时还需要切分数据。故考虑根据实际开发情况封装一个通用的联动下拉选择组件。">
<meta property="og:type" content="article">
<meta property="og:title" content="Vue 城市联动下拉选择组件实现">
<meta property="og:url" content="https://s4amq.gitee.io/2021/11/30/Vue-%E5%9F%8E%E5%B8%82%E8%81%94%E5%8A%A8%E4%B8%8B%E6%8B%89%E9%80%89%E6%8B%A9%E7%BB%84%E4%BB%B6%E5%AE%9E%E7%8E%B0/index.html">
<meta property="og:site_name" content="MQ&#39;s Blog">
<meta property="og:description" content="在做项目的过程中遇到需要选择城市的表单，需要使得 省市区 三级联动选择。element-ui 中有相关组件，但该组件将三者统一在同一个 select 下拉选择框，使得数据双向绑定时还需要切分数据。故考虑根据实际开发情况封装一个通用的联动下拉选择组件。">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="https://s4amq.gitee.io/images/photo/citySelect.png">
<meta property="og:image" content="https://img-blog.csdnimg.cn/df9194b9ab9f41708450d0f3533afef9.gif#pic_center">
<meta property="article:published_time" content="2021-11-30T09:36:55.000Z">
<meta property="article:modified_time" content="2021-12-21T07:57:31.113Z">
<meta property="article:author" content="mqchen">
<meta property="article:tag" content="Vue">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="https://s4amq.gitee.io/images/photo/citySelect.png"><title>Vue 城市联动下拉选择组件实现 | MQ's Blog</title><link ref="canonical" href="https://s4amq.gitee.io/2021/11/30/Vue-%E5%9F%8E%E5%B8%82%E8%81%94%E5%8A%A8%E4%B8%8B%E6%8B%89%E9%80%89%E6%8B%A9%E7%BB%84%E4%BB%B6%E5%AE%9E%E7%8E%B0/"><link rel="dns-prefetch" href="https://cdn.jsdelivr.net"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.12.1/css/all.min.css" type="text/css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" type="text/css"><link rel="stylesheet" href="/css/index.css?v=2.6.2"><script>var Stun = window.Stun || {};
var CONFIG = {
  root: '/',
  algolia: undefined,
  assistSearch: undefined,
  fontIcon: {"prompt":{"success":"fas fa-check-circle","info":"fas fa-arrow-circle-right","warning":"fas fa-exclamation-circle","error":"fas fa-times-circle"},"copyBtn":"fas fa-copy"},
  sidebar: {"offsetTop":"20px","tocMaxDepth":6},
  header: {"enable":true,"showOnPost":true,"scrollDownIcon":true},
  postWidget: {"endText":true},
  nightMode: {"enable":true},
  back2top: {"enable":true},
  codeblock: {"style":"carbon","highlight":"light","wordWrap":false},
  reward: false,
  fancybox: true,
  zoomImage: {"gapAside":"20px"},
  galleryWaterfall: {"colWidth":"100%","gapX":"10px"},
  lazyload: false,
  pjax: undefined,
  externalLink: {"icon":{"enable":true,"name":"fas fa-external-link-alt"}},
  shortcuts: undefined,
  prompt: {"copyButton":"复制","copySuccess":"复制成功","copyError":"复制失败"},
  sourcePath: {"js":"js","css":"css","images":"images"},
};

window.CONFIG = CONFIG;</script><meta name="generator" content="Hexo 5.4.0"></head><body><div class="container" id="container"><header class="header" id="header"><div class="header-inner"><nav class="header-nav header-nav--fixed"><div class="header-nav-inner"><div class="header-nav-menubtn"><i class="fas fa-bars"></i></div><div class="header-nav-menu"><div class="header-nav-menu-item"><a class="header-nav-menu-item__link" href="/"><span class="header-nav-menu-item__icon"><i class="fas fa-home"></i></span><span class="header-nav-menu-item__text">首页</span></a></div><div class="header-nav-menu-item"><a class="header-nav-menu-item__link" href="/archives/"><span class="header-nav-menu-item__icon"><i class="fas fa-folder-open"></i></span><span class="header-nav-menu-item__text">归档</span></a></div><div class="header-nav-menu-item"><a class="header-nav-menu-item__link" href="/categories/"><span class="header-nav-menu-item__icon"><i class="fas fa-layer-group"></i></span><span class="header-nav-menu-item__text">分类</span></a></div><div class="header-nav-menu-item"><a class="header-nav-menu-item__link" href="/tags/"><span class="header-nav-menu-item__icon"><i class="fas fa-tags"></i></span><span class="header-nav-menu-item__text">标签</span></a></div></div><div class="header-nav-mode"><div class="mode"><div class="mode-track"><span class="mode-track-moon"></span><span class="mode-track-sun"></span></div><div class="mode-thumb"></div></div></div></div></nav><div class="header-banner"><div class="header-banner-info"><div class="header-banner-info__title">MQ's Blog</div><div class="header-banner-info__subtitle"></div></div><div class="header-banner-arrow"><div class="header-banner-arrow__icon"><i class="fas fa-angle-down"></i></div></div></div></div></header><main class="main" id="main"><div class="main-inner"><div class="content-wrap" id="content-wrap"><div class="content" id="content"><!-- Just used to judge whether it is an article page--><div id="is-post"></div><div class="post"><header class="post-header"><h1 class="post-title">Vue 城市联动下拉选择组件实现</h1><div class="post-meta"><span class="post-meta-item post-meta-item--createtime"><span class="post-meta-item__icon"><i class="far fa-calendar-plus"></i></span><span class="post-meta-item__info">发表于</span><span class="post-meta-item__value">2021-11-30</span></span><span class="post-meta-item post-meta-item--updatetime"><span class="post-meta-item__icon"><i class="far fa-calendar-check"></i></span><span class="post-meta-item__info">更新于</span><span class="post-meta-item__value">2021-12-21</span></span></div></header><div class="post-body"><p>在做项目的过程中遇到需要选择城市的表单，需要使得 省市区 三级联动选择。element-ui 中有相关组件，但该组件将三者统一在同一个 select 下拉选择框，使得数据双向绑定时还需要切分数据。故考虑根据实际开发情况封装一个通用的联动下拉选择组件。</p>
<p><img src="/images/photo/citySelect.png" alt="city-select"></p>
<span id="more"></span>


        <h5 id="组件代码"   >
          <a href="#组件代码" class="heading-link"><i class="fas fa-link"></i></a><a href="#组件代码" class="headerlink" title="组件代码"></a>组件代码</h5>
      <p>template</p>
<figure class="highlight html"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">template</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;city-select&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span>&gt;</span></span><br><span class="line">      <span class="comment">&lt;!-- 选择省份时：更新市、区数据 --&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">select</span></span></span><br><span class="line"><span class="tag">        <span class="attr">v-model</span>=<span class="string">&quot;province&quot;</span></span></span><br><span class="line"><span class="tag">        @<span class="attr">change</span>=<span class="string">&quot;</span></span></span><br><span class="line"><span class="string"><span class="tag">          updateCity()</span></span></span><br><span class="line"><span class="string"><span class="tag">          updateDistrict()</span></span></span><br><span class="line"><span class="string"><span class="tag">          pushData()</span></span></span><br><span class="line"><span class="string"><span class="tag">        &quot;</span></span></span><br><span class="line"><span class="tag">      &gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">option</span> <span class="attr">v-for</span>=<span class="string">&quot;(item, index) in list&quot;</span> <span class="attr">:key</span>=<span class="string">&quot;index&quot;</span>&gt;</span>&#123;&#123; item.name &#125;&#125;<span class="tag">&lt;/<span class="name">option</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;/<span class="name">select</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">select</span></span></span><br><span class="line"><span class="tag">        <span class="attr">v-model</span>=<span class="string">&quot;city&quot;</span></span></span><br><span class="line"><span class="tag">        @<span class="attr">change</span>=<span class="string">&quot;</span></span></span><br><span class="line"><span class="string"><span class="tag">          updateDistrict()</span></span></span><br><span class="line"><span class="string"><span class="tag">          pushData()</span></span></span><br><span class="line"><span class="string"><span class="tag">        &quot;</span></span></span><br><span class="line"><span class="tag">      &gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">option</span> <span class="attr">v-for</span>=<span class="string">&quot;(item, index) in cityList&quot;</span> <span class="attr">:key</span>=<span class="string">&quot;index&quot;</span>&gt;</span>&#123;&#123; item.name &#125;&#125;<span class="tag">&lt;/<span class="name">option</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;/<span class="name">select</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">select</span> <span class="attr">v-model</span>=<span class="string">&quot;district&quot;</span> @<span class="attr">change</span>=<span class="string">&quot;pushData&quot;</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">option</span> <span class="attr">v-for</span>=<span class="string">&quot;(item, index) in DistrictList&quot;</span> <span class="attr">:key</span>=<span class="string">&quot;index&quot;</span>&gt;</span>&#123;&#123; item.name &#125;&#125;<span class="tag">&lt;/<span class="name">option</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;/<span class="name">select</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">template</span>&gt;</span></span><br></pre></td></tr></table></div></figure>

<p>script</p>
<figure class="highlight js"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 引入省市区数据</span></span><br><span class="line"><span class="keyword">import</span> list <span class="keyword">from</span> <span class="string">&#x27;../../../public/data/cities-code.json&#x27;</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span><br><span class="line">  <span class="attr">name</span>: <span class="string">&#x27;city-select&#x27;</span>,</span><br><span class="line">  <span class="function"><span class="title">data</span>(<span class="params"></span>)</span> &#123;</span><br><span class="line">    <span class="keyword">return</span> &#123;</span><br><span class="line">      list, <span class="comment">// 总数据</span></span><br><span class="line">      <span class="attr">province</span>: <span class="string">&#x27;北京&#x27;</span>, <span class="comment">// 省</span></span><br><span class="line">      <span class="attr">cityList</span>: [], <span class="comment">// 市数据,</span></span><br><span class="line">      <span class="attr">city</span>: <span class="string">&#x27;&#x27;</span>, <span class="comment">// 市</span></span><br><span class="line">      <span class="attr">DistrictList</span>: [], <span class="comment">// 区数据</span></span><br><span class="line">      <span class="attr">district</span>: <span class="string">&#x27;&#x27;</span>, <span class="comment">// 区</span></span><br><span class="line">    &#125;</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="attr">methods</span>: &#123;</span><br><span class="line">    <span class="comment">// 根据省的选择更新市数据</span></span><br><span class="line">    <span class="function"><span class="title">updateCity</span>(<span class="params"></span>)</span> &#123;</span><br><span class="line">      <span class="built_in">this</span>.list.forEach(<span class="function">(<span class="params">item</span>) =&gt;</span> &#123;</span><br><span class="line">        <span class="keyword">if</span> (item.name === <span class="built_in">this</span>.province) &#123;</span><br><span class="line">          <span class="built_in">this</span>.cityList = item.children</span><br><span class="line">        &#125;</span><br><span class="line">      &#125;)</span><br><span class="line">      <span class="built_in">this</span>.city = <span class="built_in">this</span>.cityList[<span class="number">0</span>].name</span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="comment">// 根据市的选择更新区数据</span></span><br><span class="line">    <span class="function"><span class="title">updateDistrict</span>(<span class="params"></span>)</span> &#123;</span><br><span class="line">      <span class="built_in">this</span>.cityList.forEach(<span class="function">(<span class="params">item</span>) =&gt;</span> &#123;</span><br><span class="line">        <span class="keyword">if</span> (item.name === <span class="built_in">this</span>.city) &#123;</span><br><span class="line">          <span class="built_in">this</span>.DistrictList = item.children</span><br><span class="line">        &#125;</span><br><span class="line">      &#125;)</span><br><span class="line">      <span class="built_in">this</span>.district = <span class="built_in">this</span>.DistrictList ? <span class="built_in">this</span>.DistrictList[<span class="number">0</span>].name : <span class="string">&#x27;&#x27;</span></span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="comment">// 数据变化时将数据传递给调用本组件的父组件 (在省市区数据变化时均触发数据推送)</span></span><br><span class="line">    <span class="function"><span class="title">pushData</span>(<span class="params"></span>)</span> &#123;</span><br><span class="line">      <span class="built_in">this</span>.$emit(<span class="string">&#x27;updateData&#x27;</span>, <span class="built_in">this</span>.province, <span class="built_in">this</span>.city, <span class="built_in">this</span>.district)</span><br><span class="line">    &#125;,</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="function"><span class="title">mounted</span>(<span class="params"></span>)</span> &#123;</span><br><span class="line">    <span class="comment">// this.updateCity()</span></span><br><span class="line">  &#125;,</span><br><span class="line">&#125;</span><br></pre></td></tr></table></div></figure>

<p>style (sass)</p>
<figure class="highlight css"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">// 默认样式</span><br><span class="line"><span class="selector-class">.city-select</span> &#123;</span><br><span class="line">  select &#123;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">40px</span>;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">175px</span>;</span><br><span class="line">    <span class="attribute">line-height</span>: <span class="number">40px</span>;</span><br><span class="line">    <span class="attribute">border</span>: <span class="number">1px</span> solid <span class="number">#e5e5e5</span>;</span><br><span class="line">    <span class="attribute">padding</span>: <span class="number">0</span> <span class="number">10px</span>;</span><br><span class="line">    <span class="attribute">margin-right</span>: <span class="number">15px</span>;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></div></figure>


        <h5 id="使用方法"   >
          <a href="#使用方法" class="heading-link"><i class="fas fa-link"></i></a><a href="#使用方法" class="headerlink" title="使用方法"></a>使用方法</h5>
      <ol>
<li>引入组件</li>
</ol>
<figure class="highlight js"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> CitySelect <span class="keyword">from</span> <span class="string">&#x27;@/components/module/CitySelect.vue&#x27;</span></span><br></pre></td></tr></table></div></figure>

<ol start="2">
<li>使用组件</li>
</ol>
<figure class="highlight html"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">city-select</span> @<span class="attr">updateData</span>=<span class="string">&quot;updateData&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">city-select</span>&gt;</span></span><br></pre></td></tr></table></div></figure>

<ol start="3">
<li>获取数据并使用</li>
</ol>
<figure class="highlight js"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="title">updateData</span>(<span class="params">province, city, district</span>)</span> &#123;</span><br><span class="line">  <span class="built_in">this</span>.receiverProvince = province</span><br><span class="line">  <span class="built_in">this</span>.receiverCity = city</span><br><span class="line">  <span class="built_in">this</span>.receiverDistrict = district</span><br><span class="line">&#125;,</span><br></pre></td></tr></table></div></figure>


        <h5 id="效果展示"   >
          <a href="#效果展示" class="heading-link"><i class="fas fa-link"></i></a><a href="#效果展示" class="headerlink" title="效果展示"></a>效果展示</h5>
      <p><img src="https://img-blog.csdnimg.cn/df9194b9ab9f41708450d0f3533afef9.gif#pic_center" alt="城市选择效果展示"></p>

        <h5 id="组件特点"   >
          <a href="#组件特点" class="heading-link"><i class="fas fa-link"></i></a><a href="#组件特点" class="headerlink" title="组件特点"></a>组件特点</h5>
      <ol>
<li>省市区联动，会自动根据上一级选择筛选对应的子级可选项</li>
<li>选择省份会自动填充默认 市、区</li>
</ol>

        <h5 id="使用注意事项"   >
          <a href="#使用注意事项" class="heading-link"><i class="fas fa-link"></i></a><a href="#使用注意事项" class="headerlink" title="使用注意事项"></a>使用注意事项</h5>
      <ol>
<li>导入城市数据格式要求：<br><code>[&#123;name: &#39;某某省&#39;, children: [...]&#125;, &#123;...&#125;, ...]</code></li>
<li>本组件设置有默认样式，如需更改，在父组件中通过 /deep/ 样式穿透进行设置。例如<br><code>.city-select /deep/ select &#123;......&#125;</code></li>
</ol>

        <h5 id="遇到的问题及解决方案"   >
          <a href="#遇到的问题及解决方案" class="heading-link"><i class="fas fa-link"></i></a><a href="#遇到的问题及解决方案" class="headerlink" title="遇到的问题及解决方案"></a>遇到的问题及解决方案</h5>
      <ol>
<li>引用该组件往往需要进行双向数据绑定，但绑定的数据存在于子组件，需要使用数据的是父组件。故考虑使用 $emit 进行数据传输，在数据变化时将省市区三个数据同时传递给父组件，并在父组件接收并使用数据</li>
</ol>

        <h5 id="省市区数据来源："   >
          <a href="#省市区数据来源：" class="heading-link"><i class="fas fa-link"></i></a><a href="#省市区数据来源：" class="headerlink" title="省市区数据来源："></a>省市区数据来源：</h5>
      <p><span class="exturl"><a class="exturl__link"   target="_blank" rel="noopener" href="http://www.stats.gov.cn/tjsj/tjbz/tjyqhdmhcxhfdm/" >http://www.stats.gov.cn/tjsj/tjbz/tjyqhdmhcxhfdm/</a><span class="exturl__icon"><i class="fas fa-external-link-alt"></i></span></span></p>

        <h5 id="其他-snowflake"   >
          <a href="#其他-snowflake" class="heading-link"><i class="fas fa-link"></i></a><a href="#其他-snowflake" class="headerlink" title="其他 :snowflake:"></a>其他 :snowflake:</h5>
      <p>该组件已修改并上传 npm 方便使用<br>地址：<span class="exturl"><a class="exturl__link"   target="_blank" rel="noopener" href="https://www.npmjs.com/package/m-city-select" >https://www.npmjs.com/package/m-city-select</a><span class="exturl__icon"><i class="fas fa-external-link-alt"></i></span></span></p>
</div><footer class="post-footer"><div class="post-ending ending"><div class="ending__text">------ 本文结束，感谢您的阅读 ------</div></div><div class="post-copyright copyright"><div class="copyright-author"><span class="copyright-author__name">本文作者: </span><span class="copyright-author__value"><a href="https://s4amq.gitee.io">mqchen</a></span></div><div class="copyright-link"><span class="copyright-link__name">本文链接: </span><span class="copyright-link__value"><a href="https://s4amq.gitee.io/2021/11/30/Vue-%E5%9F%8E%E5%B8%82%E8%81%94%E5%8A%A8%E4%B8%8B%E6%8B%89%E9%80%89%E6%8B%A9%E7%BB%84%E4%BB%B6%E5%AE%9E%E7%8E%B0/">https://s4amq.gitee.io/2021/11/30/Vue-%E5%9F%8E%E5%B8%82%E8%81%94%E5%8A%A8%E4%B8%8B%E6%8B%89%E9%80%89%E6%8B%A9%E7%BB%84%E4%BB%B6%E5%AE%9E%E7%8E%B0/</a></span></div><div class="copyright-notice"><span class="copyright-notice__name">版权声明: </span><span class="copyright-notice__value">本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/deed.en" rel="external nofollow" target="_blank">BY-NC-SA</a> 许可协议。转载请注明出处！</span></div></div><div class="post-tags"><span class="post-tags-item"><span class="post-tags-item__icon"><i class="fas fa-tag"></i></span><a class="post-tags-item__link" href="https://s4amq.gitee.io/tags/Vue/">Vue</a></span></div><nav class="post-paginator paginator"><div class="paginator-prev"><a class="paginator-prev__link" href="/2021/12/08/MVVM-%E7%90%86%E8%A7%A3/"><span class="paginator-prev__icon"><i class="fas fa-angle-left"></i></span><span class="paginator-prev__text">MVVM 理解</span></a></div><div class="paginator-next"><a class="paginator-next__link" href="/2021/11/27/Vue-%E9%A1%B9%E7%9B%AE-%E6%8E%A7%E5%88%B6%E9%A1%B5%E9%9D%A2%E5%86%85-div-%E6%A0%B9%E6%8D%AE%E6%B5%8F%E8%A7%88%E5%99%A8%E7%AA%97%E5%8F%A3%E5%A4%A7%E5%B0%8F%E8%87%AA%E9%80%82%E5%BA%94%E9%AB%98%E5%BA%A6/"><span class="paginator-prev__text">Vue 项目 根据浏览器窗口大小自适应高度</span><span class="paginator-next__icon"><i class="fas fa-angle-right"></i></span></a></div></nav></footer></div></div></div><div class="sidebar-wrap" id="sidebar-wrap"><aside class="sidebar" id="sidebar"><div class="sidebar-nav"><span class="sidebar-nav-toc current">文章目录</span><span class="sidebar-nav-ov">站点概览</span></div><section class="sidebar-toc"><ol class="toc"><li class="toc-item toc-level-5"><a class="toc-link" href="#%E7%BB%84%E4%BB%B6%E4%BB%A3%E7%A0%81"><span class="toc-number">1.</span> <span class="toc-text">
          组件代码</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#%E4%BD%BF%E7%94%A8%E6%96%B9%E6%B3%95"><span class="toc-number">2.</span> <span class="toc-text">
          使用方法</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#%E6%95%88%E6%9E%9C%E5%B1%95%E7%A4%BA"><span class="toc-number">3.</span> <span class="toc-text">
          效果展示</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#%E7%BB%84%E4%BB%B6%E7%89%B9%E7%82%B9"><span class="toc-number">4.</span> <span class="toc-text">
          组件特点</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#%E4%BD%BF%E7%94%A8%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A1%B9"><span class="toc-number">5.</span> <span class="toc-text">
          使用注意事项</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#%E9%81%87%E5%88%B0%E7%9A%84%E9%97%AE%E9%A2%98%E5%8F%8A%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88"><span class="toc-number">6.</span> <span class="toc-text">
          遇到的问题及解决方案</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#%E7%9C%81%E5%B8%82%E5%8C%BA%E6%95%B0%E6%8D%AE%E6%9D%A5%E6%BA%90%EF%BC%9A"><span class="toc-number">7.</span> <span class="toc-text">
          省市区数据来源：</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#%E5%85%B6%E4%BB%96-snowflake"><span class="toc-number">8.</span> <span class="toc-text">
          其他 :snowflake:</span></a></li></ol></section><!-- ov = overview--><section class="sidebar-ov hide"><div class="sidebar-ov-author"><div class="sidebar-ov-author__avatar"><img class="sidebar-ov-author__avatar_img" src="/images/icons/02.gif" alt="avatar"></div><p class="sidebar-ov-author__text">mqchen</p></div><div class="sidebar-ov-social"><a class="sidebar-ov-social-item" href="https://blog.csdn.net/PorkCanteen" target="_blank" rel="noopener" data-popover="CSDN" data-popover-pos="up"><span class="sidebar-ov-social-item__icon">C</span></a><a class="sidebar-ov-social-item" href="https://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&amp;email=2385190394@qq.com/" target="_blank" rel="noopener" data-popover="social.发送邮件" data-popover-pos="up"><span class="sidebar-ov-social-item__icon"><i class="far fa-envelope"></i></span></a></div><div class="sidebar-ov-state"><a class="sidebar-ov-state-item sidebar-ov-state-item--posts" href="/archives/"><div class="sidebar-ov-state-item__count">14</div><div class="sidebar-ov-state-item__name">归档</div></a><a class="sidebar-ov-state-item sidebar-ov-state-item--categories" href="/categories/"><div class="sidebar-ov-state-item__count">7</div><div class="sidebar-ov-state-item__name">分类</div></a><a class="sidebar-ov-state-item sidebar-ov-state-item--tags" href="/tags/"><div class="sidebar-ov-state-item__count">6</div><div class="sidebar-ov-state-item__name">标签</div></a></div><div class="sidebar-ov-cc"><a href="https://creativecommons.org/licenses/by-nc-sa/4.0/deed.en" target="_blank" rel="noopener" data-popover="知识共享许可协议" data-popover-pos="up"><img src="/images/cc-by-nc-sa.svg"></a></div></section><div class="sidebar-reading"><div class="sidebar-reading-info"><span class="sidebar-reading-info__text">你已阅读了 </span><span class="sidebar-reading-info__num">0</span><span class="sidebar-reading-info__perc">%</span></div><div class="sidebar-reading-line"></div></div></aside></div><div class="clearfix"></div></div></main><footer class="footer" id="footer"><div class="footer-inner"><div><span>Copyright © 2022</span><span class="footer__icon"><i class="fas fa-pizza-slice"></i></span><span>mqchen</span></div></div></footer><div class="loading-bar" id="loading-bar"><div class="loading-bar__progress"></div></div><div class="back2top" id="back2top"><span class="back2top__icon"><i class="fas fa-rocket"></i></span></div></div><script src="https://cdn.jsdelivr.net/npm/jquery@v3.4.1/dist/jquery.min.js"></script><script src="https://cdn.jsdelivr.net/npm/velocity-animate@1.5.2/velocity.min.js"></script><script src="https://cdn.jsdelivr.net/npm/velocity-animate@1.5.2/velocity.ui.min.js"></script><script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script><script src="https://cdn.jsdelivr.net/npm/masonry-layout@4.2.2/dist/masonry.pkgd.min.js"></script><script src="/js/utils.js?v=2.6.2"></script><script src="/js/stun-boot.js?v=2.6.2"></script><script src="/js/scroll.js?v=2.6.2"></script><script src="/js/header.js?v=2.6.2"></script><script src="/js/sidebar.js?v=2.6.2"></script></body></html>